<mat-form-field class="w-full relative" [appearance]="to.appearance || 'fill'">
  <textarea
    matInput
    [id]="id"
    [readonly]="to.readonly"
    [formControl]="formControl"
    [cols]="to.cols"
    [rows]="to.rows"
    [formlyAttributes]="field"
    [placeholder]="to.placeholder || ''"
    [tabindex]="to.tabindex"
    [cdkTextareaAutosize]="to.autosize"
    [cdkAutosizeMinRows]="to.autosizeMinRows"
    [cdkAutosizeMaxRows]="to.autosizeMaxRows"
    [class.cdk-textarea-autosize]="to.autosize"
  >
  </textarea>
  <app-btn
    matTooltip="富文本编辑"
    (click)="openRichText()"
    class="absolute right-0 bottom-1"
    [content]="{
      icon: { svg: 'pencil' },
      mode: 'mini-fab',
      color: 'primary',
    }"
  />
</mat-form-field>
<div
  class="popup rounded-lg hidden flex-col justify-center items-center gap-5 p-5 bg-white shadow-2xl"
  #popup
>
  <quill-editor
    (onEditorCreated)="editorCreated($event)"
    [modules]="modules"
    (onContentChanged)="onContentChanged($event)"
    [styles]="{ height: '100%' }"
  />
  <div class="flex justify-center items-center gap-5 mt-5">
    <app-btn (click)="onCancel()" [content]="{ label: '取消' }" />
    <app-btn (click)="onSave()" [content]="{ label: '保存', mode: 'raised', color: 'primary' }" />
  </div>
</div>
